import React from "react";
import classNames from "classnames";
import "./index.less";
import {Icon,NavBar} from '@/ui'
export default function Demo(props: any) {
  const { prefixCls = "m-react-page-nav-bar" } = props;
  const className = classNames({
    [prefixCls]: true,
  });

  const onLeftClick = () => {
    console.log("onLeftClick");
  };
  const onRightClick = () => {
    console.log("onRightClick");
  };
  return (
    <div className={className}>
      <NavBar title='NavBar'></NavBar>
      <div className="list">
        <NavBar
          title="NavBar"
          leftIcon={<Icon size="m" iconName="iconback" />}
          rightIcon={
            <>
              <Icon
                size="m"
                iconName="iconsousuo2"
                style={{ marginRight: "10px" }}
              />
              <Icon size="m" iconName="icondian" />
            </>
          }
          onLeftClick={onLeftClick}
          onRightClick={onRightClick}
        />
      </div>
      <div className="list">
        <NavBar
          title="NavBar"
          leftIcon={<Icon size="m" iconName="iconback" />}
          rightIcon={<Icon size="m" iconName="icondian" />}
        />
      </div>
      <div className="list">
        <NavBar
          title="NavBar"
          leftIcon={<Icon size="m" iconName="iconsousuo2" />}
          mode="light"
          rightIcon={<Icon size="m" iconName="icondian" />}
        />
      </div>
    </div>
  );
}
